<template>
  <div class="login-container">
    <div class="login-content">
      <div class="login-header">
        <img src="https://c-ssl.duitang.com/uploads/blog/202109/21/20210921225847_5a069.gif" class="login-logo" />
        <h2>布布熊の后台</h2>
      </div>
      <el-card class="login-card">
        <el-form :model="loginForm" :rules="rules" ref="loginFormRef">
          <div class="welcome-text">{{ welcomeText }}</div>
          
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              placeholder="布布熊的名字"
              :prefix-icon="User"
              class="custom-input"
            />
          </el-form-item>
          
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="布布熊的密码"
              :prefix-icon="Lock"
              show-password
              class="custom-input"
            />
          </el-form-item>
          
          <div class="remember-forgot">
            <el-checkbox v-model="rememberMe" class="remember-me">记住布布</el-checkbox>
            <el-link type="primary" :underline="false">忘记密码了？</el-link>
          </div>
          
          <el-button type="primary" class="login-button" @click="handleLogin" :loading="loading">
            <span v-if="!loading">开启布布之旅</span>
            <span v-else>布布正在验证...</span>
          </el-button>
        </el-form>
      </el-card>
      
      <div class="login-footer">
        <img src="https://c-ssl.duitang.com/uploads/blog/202109/21/20210921225847_5a069.gif" class="footer-icon" />
        <span>今天也是元气满满的一天呢~</span>
      </div>
    </div>
    
    <!-- 装饰元素 -->
    <div class="decoration-container">
      <img v-for="(deco, index) in decoElements" 
           :key="index"
           src="https://c-ssl.duitang.com/uploads/blog/202109/21/20210921225847_5a069.gif" 
           class="deco"
           :style="deco.style"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'

const router = useRouter()
const loginFormRef = ref(null)
const loading = ref(false)
const rememberMe = ref(false)
const welcomeText = ref('')

const welcomeMessages = [
  '欢迎回来，布布~',
  '欢迎回来，二二~',
  '布布今天也要元气满满哦~',
  '二二来啦，开心！',
  '布布最可爱啦~',
  '二二今天也是萌萌哒~'
]

const getRandomWelcome = () => {
  const randomIndex = Math.floor(Math.random() * welcomeMessages.length)
  welcomeText.value = welcomeMessages[randomIndex]
}

onMounted(() => {
  getRandomWelcome()
  startAnimation()
})

const loginForm = reactive({
  username: '',
  password: ''
})

const rules = {
  username: [{ 
    required: true, 
    validator: (rule, value, callback) => {
      if (!value) {
        ElMessage({
          message: '请输入布布熊的名字',
          type: 'warning',
          position: 'top-center',
          duration: 2000
        })
        callback(new Error())
      } else {
        callback()
      }
    },
    trigger: 'blur' 
  }],
  password: [{ 
    required: true, 
    validator: (rule, value, callback) => {
      if (!value) {
        ElMessage({
          message: '请输入布布熊的密码',
          type: 'warning',
          position: 'top-center',
          duration: 2000
        })
        callback(new Error())
      } else {
        callback()
      }
    },
    trigger: 'blur' 
  }]
}


const layoutAlert = (message,type='warning', position='top-center', duration=2000) => {
  ElMessage({
    message: message,
    type: type,
    position: position,
    duration: duration
  })
}
const handleLogin = () => {
  if(!loginForm.username) return layoutAlert('请输入布布熊的名字')
  if(!loginForm.password) return layoutAlert('请输入布布熊的密码')
  
  loading.value = true
  setTimeout(() => {
    if (loginForm.username === 'admin' && loginForm.password === 'admin') {
      router.push('/')
    } else {
      layoutAlert('啊哦，布布熊好像输错了...')
    }
    loading.value = false
  }, 1500)
}

// 装饰元素的初始位置
const initialPositions = [
  { top: '15%', left: '10%' },
  { top: '25%', right: '10%' },
  { bottom: '15%', left: '20%' }
]

// 生成随机移动距离
const getRandomMove = () => {
  const distance = Math.random() * 40 - 20 // -20 到 20 之间的随机数
  return Math.round(distance)
}

// 生成随机延迟时间
const getRandomDelay = () => {
  return Math.random() * 2 // 0 到 2 秒之间的随机延迟
}

// 装饰元素状态
const decoElements = reactive(initialPositions.map((pos, index) => ({
  style: {
    ...pos,
    transform: 'translate(0, 0) rotate(0deg)',
    transition: 'transform 3s ease-in-out',
    animationDelay: `${getRandomDelay()}s`
  }
})))

// 更新装饰元素位置和旋转
const updateDecoPosition = (index) => {
  const x = getRandomMove()
  const y = getRandomMove()
  const rotation = Math.round(Math.random() * 360)
  
  decoElements[index].style.transform = `translate(${x}px, ${y}px) rotate(${rotation}deg)`
}

// 定时器引用
let timers = []

// 开始动画
const startAnimation = () => {
  decoElements.forEach((_, index) => {
    const animate = () => {
      updateDecoPosition(index)
      timers[index] = setTimeout(animate, 3000 + Math.random() * 2000) // 3-5秒随机间隔
    }
    animate()
  })
}

// 组件卸载时清理定时器
onBeforeUnmount(() => {
  timers.forEach(timer => clearTimeout(timer))
})

</script>

<style scoped>
:root {
  --primary-color: #4a90e2;
  --text-color: #2c3e50;
}

.login-container {
  min-height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #e8f4ff 0%, #f5e6ff 100%);
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.login-content {
  width: 100%;
  max-width: 420px;
  z-index: 1;
  padding: 0 20px;
  box-sizing: border-box;
}

.login-header {
  text-align: center;
  margin-bottom: 24px;
}

.login-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 16px;
  padding: 4px;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.login-header h2 {
  color: var(--text-color);
  font-size: 28px;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.login-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  border: none;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.welcome-text {
  text-align: center;
  font-size: 18px;
  color: var(--text-color);
  margin-bottom: 24px;
}

.custom-input :deep(.el-input__wrapper) {
  background-color: #f5f7fa;
  border-radius: 12px;
  padding: 12px;
  box-shadow: none !important;
  border: 2px solid transparent;
  transition: all 0.3s;
}

.custom-input :deep(.el-input__wrapper:hover) {
  border-color: var(--primary-color);
}

.custom-input :deep(.el-input__wrapper.is-focus) {
  border-color: var(--primary-color);
  background-color: #fff;
}

.remember-forgot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 0 24px;
}

.remember-me {
  color: var(--text-color);
}

.login-button {
  width: 100%;
  height: 44px;
  border-radius: 12px;
  font-size: 16px;
  background: linear-gradient(135deg, #4a90e2 0%, #6ba6e5 100%);
  color: white;
  font-weight: 500;
  border: none;
  transition: all 0.3s;
  margin-top: 20px;
  cursor: pointer;
}

.login-button:hover {
  transform: translateY(-2px);
  /* box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3); */
  opacity: 0.9;
}

.login-button:active {
  transform: translateY(0);
  /* box-shadow: 0 2px 6px rgba(74, 144, 226, 0.2); */
}

.login-footer {
  text-align: center;
  margin-top: 24px;
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.footer-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

/* 装饰元素 */
.decoration-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
}

.deco {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  opacity: 0.6;
  will-change: transform;
}

/* Element Plus 样式覆盖 */
:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
  color: var(--primary-color);
}

:deep(.el-form-item) {
  margin-bottom: 20px;
}

:deep(.el-input__prefix-icon) {
  font-size: 18px;
  color: #909399;
}
</style> 